<template>
  <view class="indexs">
    <view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
      <view
        class="header_height"
        :style="
          'height:' +
          gaodu +
          'px;line-height:' +
          gaodu +
          'px;top:' +
          gaodutops +
          'px;'
        "
      >
        <view class="index_h_cont3">
          <view class="index_wenben_img" @tap="jumpzuo">
            <image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
          </view>
          <view class="index_wenben baise">{{
            $t("page_my_cupponcenter.coupon_center")
          }}</view>
        </view>
      </view>
      <view class="coloe_title">s</view>
    </view>
    <view
      class="index_center"
      :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'"
    >
      <view class="my_pinzhenglist_center">
        <view class="index_swiper">
          <!--Tab布局-->
          <view class="index_title">
            <block v-for="(item, index) in malllist" :key="index">
              <view
                :data-id="item.id"
                :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')"
                @tap="getcurrentid"
              >
                <view class="mall_t1">{{ item.name }}</view>
              </view>
            </block>
            <view
              class="mys_xians_po"
              :style="'width:' + width + 'px;left:' + left + 'px;'"
            >
              <view class="mys_xians"></view>
            </view>
          </view>
          <!--内容布局-->
          <view class="index_list">
            <swiper
              class="swiper paid_list_cont"
              @change="pagechange"
              :current="currentIndex"
              :style="'height:' + height + ';'"
            >
              <block v-for="(item, index) in malllist" :key="index">
                <swiper-item>
                  <view :class="'index_list_heji' + index">
                    <view class="my_yhq_list" v-if="cupponlist.length != 0">
                      <view
                        class="my_yhq_cont"
                        v-for="(item, index) in cupponlist"
                        :key="index"
                        :style="
                          item.state.value == '' ? 'filter: grayscale(1)' : ''
                        "
                      >
                        <image
                          :src="imgUrl + '/dzx_img139.png'"
                          v-if="item.color.value == 10"
                        ></image>
                        <image
                          :src="imgUrl + '/dzx_img139.png'"
                          v-if="item.color.value == 20"
                          style="filter: hue-rotate(100deg)"
                        ></image>
                        <image
                          :src="imgUrl + '/dzx_img139.png'"
                          v-if="item.color.value == 30"
                          style="filter: hue-rotate(20deg)"
                        ></image>
                        <image
                          :src="imgUrl + '/dzx_img139.png'"
                          v-if="item.color.value == 40"
                          style="filter: hue-rotate(200deg)"
                        ></image>
                        <view class="my_yhq_cont_txt">
                          <view class="my_yhq_cont_l">
                            <view class="my_yhq_cont_t1">{{ item.name }}</view>
                            <view
                              class="my_yhq_cont_t2"
                              style="margin-left: 24rpx"
                              >{{
                                $t(
                                  "page_my_cupponcenter.only_available_some_channels"
                                )
                              }}</view
                            >
                            <view
                              class="my_yhq_cont_t3"
                              v-if="item.expire_type == 20"
                              >{{ $t("page_my_cupponcenter.Valid_until")
                              }}{{ item.start_time.text }}-{{
                                item.end_time.text
                              }}</view
                            >
                            <view
                              class="my_yhq_cont_t3"
                              v-if="item.expire_type == 10"
                            >
                              {{
                                $t("page_my_cupponcenter.day", {
                                  num: item.expire_day,
                                })
                              }}
                            </view>
                          </view>
                          <view class="my_yhq_cont_r">
                            <view
                              class="my_yhq_cont_t4"
                              v-if="item.coupon_type.value == 20"
                              >{{ item.discount
                              }}{{ $t("page_my_cupponcenter.zhe") }}</view
                            >
                            <view
                              class="my_yhq_cont_t4"
                              v-if="item.coupon_type.value == 10"
                              >{{ price_mode.unit
                              }}{{ item.reduce_price }}</view
                            >
                            <view class="my_yhq_cont_t2">
                              {{
                                $t("page_my_cupponcenter.keyong", {
                                  price: item.min_price,
                                })
                              }}
                            </view>
                            <view
                              :data-coupon-id="item.coupon_id"
                              class="my_yhq_cont_t5"
                              v-if="item.state.value == 1"
                              @tap="receive"
                              >{{
                                $t("page_my_cupponcenter.Click_collect")
                              }}</view
                            >
                            <view
                              class="my_yhq_cont_t5"
                              v-if="item.state.value == ''"
                              ><text>{{ item.state.text }}</text></view
                            >
                          </view>
                        </view>
                      </view>
                    </view>

                    <view class="my_yhq_kong" v-else>
                      <image :src="imgUrl + '/dzx_img142.png'"></image>
                      <text>{{
                        $t("page_my_cupponcenter.currently_no_coupons")
                      }}</text>
                    </view>
                  </view>
                </swiper-item>
              </block>
            </swiper>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
let request = require("../../../utils/require");
export default {
  data() {
    return {
      navH: app.globalData.navHeight,
      gaodu: app.globalData.height,
      gaodutops: app.globalData.top,
      imgUrl: app.globalData.imgUrl,
      price_mode: uni.getStorageSync("price_mode"),
      malllist: [
        {
          id: 0,
          name: "满减券",
        },
        {
          id: 1,
          name: "折扣券",
        },
        {
          id: 2,
          name: "任务送",
        },
      ],
      height: 0,
      heights: 0,
      currentIndex: 0,
      left: 16,
      false: false,
      width: 0,
      cupponlist: [],
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */ onLoad() {
    var that = this;
    that.changeline();
  },
  onShow() {
    var that = this;
    that.getCouponList();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    /**
     * 获取优惠券列表
     */
    getCouponList: function () {
      var that = this;
      var data = {
        token: uni.getStorageSync("token"),
        coupon_type: this.currentIndex,
      };
      request
        .get(
          `index.php?s=/api/coupon/lists&wxapp_id=` +
            uni.getStorageSync("web_id"),
          data
        )
        .then((result) => {
          console.log(result.data.data.list, 888);
          that.cupponlist = result.data.data.list,
          setTimeout(() => {
            that.swiperhegiht(that.currentIndex);
          }, 300);
        });
    },
    /**
     * 立即领取
     */
    receive: function (e) {
      console.log(e, 645);
      var that = this;
      var couponId = e.currentTarget.dataset.couponId;
      var data = {
        token: uni.getStorageSync("token"),
        coupon_id: couponId,
      };
      request
        .post(
          `index.php?s=/api/user.coupon/receive&wxapp_id=` +
            uni.getStorageSync("web_id"),
          data
        )
        .then((result) => {
          uni.showToast({
            title: result.data.msg,
          });
          // 获取优惠券列表
          that.getCouponList();
        });
    },

    //swiper切换时会调用
    pagechange: function (e) {
      var that = this;
      that.swiperhegiht(e.detail.current);
      that.changeline();
      that.getCouponList();
    },

    //swiper单击事件
    getcurrentid(e) {
      console.log(e, 6543);
      this.currentIndex = e.currentTarget.dataset.id,
      console.log(this.currentIndex, 5444);
    },

    //swiper选项卡的高度
    swiperhegiht(es) {
      console.log(es, 6544);
      var that = this;
      var query = uni.createSelectorQuery();
      query.selectAll(".index_list_heji" + es).boundingClientRect();
      query.exec((res) => {
        console.log(res, "65675323456");
        var listHeight = res[0][0].height;
        that.height = listHeight + "px"
        that.heights = res[0]
      });
    },

    //下标线左右滑动效果
    changeline: function (e) {
      const query = uni.createSelectorQuery();
      var that = this;
      query.select(".mall_on").boundingClientRect();
      query.exec(function (res) {
        console.log(res, "????");

        if (res[0] != null) {
          that.left = res[0].left
          that.width = res[0].width
        } else {
          that.left = 0
        }
      });
    },

    jumpzuo() {
      uni.navigateBack();
    },
  },
};
</script>
<style>
@import "./my_cupponcenter.css";
</style>
